3D model

Basic example

View your 3D models in the browser. For performance reasons we use the AR quality models for showcase as these are optimized for web use.

The 3D model-viewer is based on the Google model-viewer. You can access the entire API of the model-viewer by using the modelViewer property of the cylindo-viewer element.

Result

Loading...

Live Editor

function Component() {
  useLayoutEffect(() => {
    const viewer = document.querySelector("cylindo-viewer");
    viewer.addEventListener("loaded", () => {
      const { modelViewer } = viewer;
      modelViewer.exposure = 0.9;
    });
  }, []);
  return (
    <cylindo-viewer customer-id="5098" code="ARMCHAIR-PDP">
      <cylindo-model />
    </cylindo-viewer>
  );
}

Model dimensions

The 3D model can display the width, height and depth of your product. Set the show-dimensions attribute to "true" to show the dimensions from the content API.

Result

Loading...

Live Editor

<cylindo-viewer customer-id="5098" code="ARMCHAIR-PDP">
  <cylindo-model show-dimensions="true"></cylindo-model>
</cylindo-viewer>

To hide the dimensions of all the models at once, set the modelDimensionsEnabled property of the cylindo-viewer element to false.

Styling the dimensions

You can style the dimensions through the CSS pseudo-element ::part or through the CSS variables. Read more about it here.

You can play around with the styles in the live example below.

Result

Loading...

Live Editor

<div className="styled-dimensions">
  {/* For the purpose of the example, we are scoping the styles in the div element. */}
  <style>
    {`
      .styled-dimensions {
        --dimensions-min-opacity: 0;
      }
      .styled-dimensions ::part(three-d-dimension-label) {
        background: SteelBlue;
        color: white;
      }
      .styled-dimensions ::part(three-d-dimension-line) {
        stroke: SteelBlue;
      }
    `}
  </style>
  <cylindo-viewer customer-id="5098" code="ARMCHAIR-PDP">
    <cylindo-model show-dimensions="true" />
  </cylindo-viewer>
</div>

Attributes

Name	Type	Default	Description
zoomable	boolean	false	Enables zoom functionality.
alt	string	""	Alternative text.
show-dimensions	boolean	false	Shows the product dimensions.